<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="提现" />
        <view class="content">
            <view class="card top">
                <view class="title fb-30">
                    提现金额
                    <text class="tips f-24">
                        (每笔提现最低{{ datas.min_cash || 0 }}元)
                    </text>
                </view>
                <view class="input flex align-center just-between">
                    <text class="icon">￥</text>
                    <input
                        class="int"
                        type="number"
                        v-model="money"
                        placeholder="请输入提现金额"
                    />
                    <text class="tip">手续费{{ datas.noun_cash || 0 }}%</text>
                </view>
                <view class="sub flex align-center">
                    <view>
                        当前可提现金额：￥
                        {{
                            type == 1
                                ? datas.service_price
                                : datas.car_price || 0
                        }}
                    </view>
                    <view>
                        实际到账金额：
                        <text>
                            ￥{{
                                (
                                    money -
                                    money * (datas.noun_cash / 100)
                                ).toFixed(2) || 0
                            }}
                        </text>
                    </view>
                </view>
            </view>

            <view class="card center">
                <view class="title fb-30"> 提现方式 </view>
                <view
                    class="item flex align-center just-between"
                    :class="showIndex == index ? 'line' : ''"
                    v-for="(item, index) in cashList"
                    :key="item.id"
                    @click="onChoose(item, index)"
                >
                    <view class="left flex align-center">
                        <image
                            class="img"
                            :src="item.icon"
                            mode="scaleToFill"
                        />
                        <view class="flex column">
                            <view class="text f-30">
                                {{ item.title }}
                                <text
                                    class="noTip f-24"
                                    v-if="index == 1"
                                    @click.stop="addAlipay()"
                                >
                                    {{
                                        datas.zfb_info_type == 1
                                            ? "更换账号"
                                            : "暂无账号"
                                    }}
                                </text>
                            </view>
                            <view
                                class="info f-24"
                                v-if="
                                    datas.zfb_info_type == 1 &&
                                    datas.zfb_info &&
                                    index == 1
                                "
                            >
                                <text>姓名：{{ datas.zfb_info.HideName }}</text>
                                <text
                                    >账号：{{ datas.zfb_info.HideMobile }}</text
                                >
                            </view>
                        </view>
                    </view>
                    <view class="right">
                        <image
                            v-if="index == showIndex"
                            class="icon"
                            src="/static/static/technician/joinUs/cashSuccess.png"
                        />
                        <image
                            v-else
                            class="icon"
                            src="/static/static/technician/joinUs/cashErr.png"
                        />
                    </view>
                </view>
            </view>
            <view class="card">
                <view class="rich_box">
                    <view class="title fb-30"> 提现规则 </view>
                    <view class="rich">
                        <rich-text :nodes="datas.WithdrawalRule"></rich-text>
                    </view>
                </view>
            </view>
        </view>

        <view class="btns">
            <view
                class="btn"
                :style="{ opacity: money >= 10 ? 1 : 0.7 }"
                @click="submit"
            >
                提交申请
            </view>
        </view>
    </div>
</template>
<script>
import { getWithdrawInfo, withdraw } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            datas: {},

            cashList: [
                {
                    title: "提现到微信",
                    icon: "/static/static/technician/joinUs/wechat.png",
                    status: true,
                    id: 1,
                },

                {
                    title: "提现到支付宝",
                    icon: "/static/static/technician/joinUs/alipay.png",
                    status: false,
                    id: 2,
                },

                {
                    title: "线下转账",
                    icon: "/static/static/technician/joinUs/brank.png",
                    status: false,
                    id: 3,
                },
            ],

            money: null,
            showIndex: 0,
            type: 0,
        };
    },

    onLoad(options) {
        this.type = options.type;
    },

    onShow() {
        this.getWithdrawInfo();
    },

    methods: {
        // 获取提现信息
        getWithdrawInfo() {
            getWithdrawInfo()
                .then((res) => {
                    this.datas = res.data;
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
        // 提交申请
        submit() {
            if (this.money < Number(this.datas.min_cash)) {
                uni.showToast({
                    title: `提现金额最低${this.datas.min_cash}元`,
                    icon: "none",
                });
                return;
            }
            if (
                this.money >
                (this.type == 1
                    ? this.datas.service_price
                    : this.datas.car_price)
            ) {
                uni.showToast({
                    title: "余额不足",
                    icon: "none",
                });
                return;
            }
            if (this.showIndex == 0) {
                this.withdraw(1);
            } else if (this.showIndex == 1) {
                this.withdraw(2);
            } else if (this.showIndex == 2) {
                this.withdraw(3);
            }
        },
        withdraw(noun_type) {
            withdraw({
                type: this.type,
                noun_type: noun_type,
                money: Number(this.money),
            })
                .then((res) => {
                    setTimeout(() => {
                        uni.redirectTo({
                            url: "/subPages/technician/recruit/cashLoading",
                        });
                    }, 800);
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
        onChoose(item, index) {
            this.showIndex = index;
        },
        addAlipay() {
            uni.navigateTo({
                url:
                    "/subPages/technician/recruit/addAlipay?info=" +
                    JSON.stringify(this.datas.zfb_info),
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx;
    box-sizing: border-box;
    .top {
        width: 100%;
        height: 100%;

        .tips {
            color: $theme-color;
            font-weight: normal;
            margin-left: 20rpx;
        }
        .input {
            font-size: 48rpx !important;
            margin: 30rpx 0 20rpx 0;
            padding-bottom: 10rpx;
            border-bottom: 2rpx solid #ececec;
            .icon {
                width: 48rpx;
                padding-right: 4%;
            }
            .int {
                font-size: 48rpx !important;
                flex: 1;
            }
            .tip {
                font-size: 24rpx;
                width: 108rpx;
                color: #f87918;
            }
        }
        .sub {
            font-size: 24rpx;
            color: #999999;
            > view {
                width: 50%;
                > text {
                    color: #f87918;
                }
            }
        }
    }
    .center {
        width: 100%;
        height: 100%;
        .title {
            font-size: 30rpx;
            margin: 0 0 20rpx 0;
        }
        .item {
            font-size: 26rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            border: 2rpx solid #dddddd;
            border-radius: 20rpx;
            box-sizing: border-box;
            .left {
                .text {
                    font-size: 30rpx;
                }
            }
            .right {
                .icon {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 20rpx;
                }
            }
        }
    }
}
.card {
    width: 100%;
    background: white;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
    z-index: 99999;

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
.img {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
}
.icon {
    width: 40rpx;
    height: 40rpx;
}
.rich_box {
    width: 100%;
    height: 100%;
    .rich {
        margin: 20rpx 0;
        line-height: 1.5;
        color: #606060;
        font-size: 26rpx;
    }
}
.line {
    border: 2rpx solid #a194d7 !important;
}
.noTip {
    color: #a194d7;
    margin-left: 20rpx;
}
.info {
    color: #999999;
    margin-top: 10rpx;
    > text {
        margin-right: 20rpx;
    }
}
</style>